<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://cdn.staticfile.org/axios/0.19.0-beta.1/axios.js"></script>

  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
</head>

<body>
  <div id="app">
    {{user}}
    <avue-crud ref="crud" :option="option" v-model="user" :data="data"></avue-crud>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        user: {},
        data: [{
          select: 'Shanghai',
          icon: "el-icon-platform-eleme",
          color: 'rgba(69, 43, 43, 1)',
          array: '1,2,3',
          href: 'https://www.baidu.com',
          img: 'http://demo.cssmoban.com/cssthemes5/twts_236_rage/assets/images/background/header.jpg,http://demo.cssmoban.com/cssthemes5/twts_236_rage/assets/images/background/header.jpg'
        }],
        option: {
          align: 'center',
          menuAlign: 'center',
          border: true,
          column: [{
            label: '搜索',
            prop: 'search',
            type: 'search'
          }, {
            label: '文本框',
            prop: 'text',
          }, {
            label: '图标',
            prop: 'icon',
            type: 'icon'
          }, {
            label: '颜色',
            prop: 'color',
            type: 'color'
          }, {
            label: '超链接',
            prop: 'href',
            alone: true,
            type: 'url'
          }, {
            label: '图片',
            prop: 'img',
            dataType: 'string',
            type: 'img'
          }, {
            label: '数组',
            prop: 'array',
            type: 'array'
          }, {
            label: '分组',
            prop: 'select',
            type: 'select',
            group: true,
            dicData: [{
              label: '热门城市',
              groups: [{
                value: 'Shanghai',
                label: '上海'
              }, {
                value: 'Beijing',
                label: '北京'
              }]
            }, {
              label: '城市名',
              groups: [{
                value: 'Chengdu',
                label: '成都'
              }, {
                value: 'Shenzhen',
                label: '深圳'
              }, {
                value: 'Guangzhou',
                label: '广州'
              }, {
                value: 'Dalian',
                label: '大连',
              }]
            }]
          }]
        }
      }
    }
  })
</script>

</html>